<template>
    <div>
        <div class="crumbs">
            <Breadcrumb separator="/">
                <BreadcrumbItem to="/repeat"><Icon type="md-cash"/> 碎片组</BreadcrumbItem>
                <BreadcrumbItem>详情</BreadcrumbItem>
            </Breadcrumb>
        </div>
        <Card class="box-card">
            <Row :gutter="20">
                <Col :span="8" v-for="(item, i) in data" :key="i">
                    <Card class="box-card mb10">
                        <Input v-model="item.title" placeholder="主标题" class="mb10"></Input>
                        <Input v-model="item.sub_title" placeholder="副标题" class="mb10"></Input>
                        <Input v-model="item.summary" placeholder="描述" class="mb10"></Input>
                        <Input v-model="item.url" placeholder="链接" class="mb10"></Input>
                        <InputNumber v-model="item.px" :min="0" :max="100" placeholder="排序" class="mb10"></InputNumber>
                        <br/>
                        <img :src="item.img" style="height:100px;" class="mb10"/>
                        <Upload
                            type="drag"
                            :action="uploadApi"
                            :headers="headers"
                            :show-upload-list="false"
                            :on-success="(res) => {
                                onSuccess(res, i);
                            }"
                            >
                            <div style="padding: 20px 0">
                                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                                <p>点击或拖拽文件到这里</p>
                            </div>
                        </Upload>
                        <Button class="remove mt10" icon="md-trash" type="error" @click="remove(i, item.id)">删除</Button>
                    </Card>
                </Col>
            </Row>
            <div id="btnDiv">
                <Button icon="md-checkmark" type="primary" @click="save()">保存</Button>
                <Button icon="md-add" type="success" @click="add">添加</Button>
                <Button icon="md-refresh" type="info" @click="reset">重置</Button>
                <Button icon="ios-arrow-back" @click="back">返回</Button>
            </div>
        </Card>
    </div>
</template>

<script>
    import { quillEditor } from 'vue-quill-editor';
    export default {
        components: {
            quillEditor
        },
        data: function(){
            return {
                url: pub.apiDomain + 'repeat_item',
                form: {
                    
                },
                data: [],
                id: this.$route.params.id,
                uploadApi: pub.apiDomain + 'index/upload',
                headers: {'Authorization': pub.token()},
            }
        },
        created(){
            this.getData();
        },
        methods: {
            //加载内容：在翻页或搜索后
            getData(){
                this.$axios.get(this.url + '/ls/pid/' + this.id).then(res => {
                    this.data = res.d;
                });
            },
            back(){
                this.$router.push('/repeat');
            },
            add(){
                this.data.push({pid: this.id, img:'', px: this.data.length + 1});
            },
            remove(i, id) {
                if(!id) {
                    return this.data.splice(i, 1);  //没保存的直接删除
                }
                if(!confirm('确定删除吗？')) return ;
                this.$axios.get(this.url + '/del/id/'+id, this.data).then((res) => {
                    this.$Message.success('删除成功！');
                    this.data.splice(i, 1);
                })
            },
            reset(){
                this.getData();
            },
            save() {
                this.$axios.post(this.url + '/save', this.data).then((res) => {
                    this.$Message.success('保存成功！');
                    this.getData();
                })
            },
            onSuccess(res, index) {
                this.$Message.success('上传成功！');
                this.data[index].img = res.m;
                console.log(res.m);
            },
        }
    }
</script>
<style>
.Card__body{position: relative;}
</style>
<style scoped>
#btnDiv{
    position: fixed;
    top: 84px;
    right: 60px;
}
.mb10{margin-bottom: 10px;}
</style>
